<template>

<!--spu列表-->
    <div>
        分类：
        <el-cascader
                v-model="categoryDTO"
                :options="categoryDTOList"
                :props = "myProps">
        </el-cascader>
        {{categoryDTO}}============={{category3Id}}
        <br>
      <div v-show="!showSpuForm && !showSkuForm">
        <div style="margin-bottom:10px;">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSpu()">添加SPU</el-button>
        </div>

        <el-table
            :data="spuList"
            element-loading-text="数据正在加载......"
            border
            fit
            highlight-current-row>
            <el-table-column label="SPU ID" width="100">
            <template slot-scope="scope">
                {{ scope.row.id }}
            </template>
            </el-table-column>
            <el-table-column label="商品名称">
            <template slot-scope="scope">
                <span>{{ scope.row.spuName }}</span>
            </template>
            </el-table-column>
            <el-table-column label="商品描述">
            <template slot-scope="scope">
                <span>{{ scope.row.description }}</span>
            </template>
            </el-table-column>

            <el-table-column label="品牌ID">
            <template slot-scope="scope">
                <span>{{ scope.row.tmId }}</span>
            </template>
            </el-table-column>

            <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="addSku(scope.row.id, scope.row.spuName, scope.row.tmId)">添加SKU</el-button>
            </template>
            </el-table-column>
        </el-table>
            <!-- 分页组件 -->
        <el-pagination
            :current-page.sync="pageNo"
            :total="total"
            :page-size.sync="pageSize"
            :page-sizes="[2, 4, 6, 8]"
            style="padding: 30px 0; text-align: center;"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            @current-change="getSpuInfoPage"
            @size-change="getSpuInfoPage"
        />
        </div>

       <SpuForm ref="SpuFormRef" v-show="showSpuForm"
            @saveSpuInfoEvent_2109A = "saveSpuInfoSuccess"
            @backToSpuListEvent_2109A="backToSpuList"/> 
            
        <SkuForm ref="SkuFormRef" v-show="showSkuForm"/> 
    </div>
</template>
<script>
import categoryApi from '../../api/product/category.js'
import spuApi from '../../api/product/spu.js'
import * as categoryTrademarkApi from '../../api/product/categoryTrademark.js'

import SpuForm from './components/SpuForm';  //子组件
import SkuForm from './components/SkuForm';  //子组件

export default {
    components:{
        SpuForm,
        SkuForm
    },
    data(){
        return{
            categoryDTO:[],//三级ID， category1_id,category2_id,category3_id
            categoryDTOList:[],
            category1Id:0,
            category2Id:0,
            category3Id:0,
            myProps:{
                value:'id',
                label:'name'
            },
            spuList:[],
            pageNo:1,
            pageSize:2,
            total:0,
            showSpuForm:false,
            showSkuForm:false
        }
    },
    methods:{
        findCategoryTree(){
            categoryApi.findCategoryTree().then(res=>{
                this.categoryDTOList = res.data.data;
            })
        },
        getSpuInfoPage(){
            let searchMap = {
                category3Id:this.category3Id
            }
            spuApi.getSpuInfoPage(this.pageNo,this.pageSize,searchMap)
            .then(res=>{
                if(res.data.ok){
                    this.spuList = res.data.data.records;
                    this.total = res.data.data.total;
                }
            })
        },
        addSpu(){
            this.showSpuForm = true;
            this.$refs.SpuFormRef.init(this.category3Id)
        },
        backToSpuList(){
            this.showSpuForm = false;
        },
        saveSpuInfoSuccess(){
            this.showSpuForm = false;
            this.getSpuInfoPage();
        },
        addSku(spuId,spuName,tmId){
            this.showSkuForm = true;
            this.$refs.SkuFormRef.init(spuId,spuName,tmId,this.category1Id,this.category2Id,this.category3Id)

        }
    },
    mounted(){
        this.findCategoryTree();
    },
    watch:{//监控数据的变化
        categoryDTO(newValue,oldValue){
            this.category1Id = newValue[0]
            this.category2Id = newValue[1]
            this.category3Id = newValue[2]
            this.getSpuInfoPage();

            this.$refs.SpuFormRef.init(this.category3Id)
        }
    }
}
</script>
<style>

</style>

